<script>
import {getComment,commit,delComment,getartical} from '../api'
export default {
    name:'detail',
    data(){
        return {
            main:{
                content:'...',
                text:'',
                tags:[],
                CreateTime:0
            },
            comment:[],
            commit:''
        }
    },
    created(){
        let hash = this.$route.params.id || null
        getartical({hash:hash}).then(res=>{
            if(res.status===200){
                this.main = res.data[0]
            }
        })
        this.getComment(hash)
    },
    methods:{
        async getComment(id){
            let res = await getComment({form:'Commit',title:id})
            this.comment = res.data.reverse()
        },
        sendCommit(){
            let hash = this.$route.params.id || null

            if(this.commit.replace(/\' '/g,'')==''){
                alert('未填写！')
                return
            }
            commit({title:hash,content:this.commit}).then(res=>{
                if(res.status ===200){
                    this.getComment(hash);
                    this.commit = ''
                }
            })
        },
        delCommit(hash){
            let id = this.$route.params.id || null
            delComment({hash:hash}).then(res=>{
                if(res.status ===200){
                    this.getComment(id);
                }
            })
        }
    }
}
</script>
<template>
    <div class="detail">
        <div class="detail-info">
            <div class="cont">
                <div class="pic" v-html="main.content">...</div>
            </div>
            <div class="text">
                <p>{{main.text}}</p>
            </div>
            <div class="tags">
                <a 
                v-for="(tag,tagk) in main.tags" 
                class="tag-link"
                :key="`tag${tagk}`"
                >#{{tag}}</a>
            </div>
            <div class="info">{{new Date(main.CreateTime*1000).toLocaleDateString()}}</div>
        </div>  
        <div class="detail-page clearfix">
            <a class="fr">下一篇</a>   
        </div>
        <div class="detail-post ">
            <p>评论</p>   

            <div class="form clearfix">
                <textarea v-model="commit"/>
                <button class="fr" @click="sendCommit">评论</button>   
            </div> 
            <ul class="detail-post-main">
                <template
                v-for="co in comment"
                >
                    <li class="detail-comment"
                    :key="co.hash"
                    >
                        <div class="comment-info clearfix">
                            <img src="/static/avatar.jpg" class="fl" alt="">
                            <span class="fl user">0231019</span>
                            <span class="fr del" @click="delCommit(co.hash)">删除</span>
                        </div>
                        <div class="comment-main">{{co.content}}</div>
                        <div class="comment-time">Create At：{{new Date(co.CreateTime*1000).toLocaleDateString()}}</div>
                    </li>
                </template>    
            </ul>
        </div>  
    </div> 
</template>
<style lang="stylus" scoped>
.detail
    padding: 45px 25px 15px;
    border-bottom: 1px solid #e6e6e6;
    .pic>img 
        width 100%
        cursor pointer;
    .text>p
        font-size 12px 
        color #666
    .info 
        color #a1a1a1;
        font-size 12px
        cursor pointer;
        user-select none
        &:hover 
            color #666
    .tag-link
        color #a1a1a1;
        font-size 12px
        cursor pointer;
        user-select none
        margin-right 12px
        &:hover 
            color #666
    .detail-page 
        padding: 25px;
        text-align: center;
        a 
            color #a1a1a1;
            font-size 12px
            cursor pointer;
            user-select none
            margin-right 12px
            &:hover 
                color #666 
    .detail-post
        p 
            font-size 14px
        &-main 
            position relative
            li.detail-comment
                list-style none
                padding 10px 0
                .comment-info
                    position relative
                    &:hover .del
                        opacity 1
                    img 
                        width 20px 
                        height 20px
                        margin-bottom 0
                    span.user 
                        color #a1a1a1 
                        font-size 12px
                        margin-left 12px
                        cursor pointer
                        &:hover
                            text-decoration underline 
                    span.del
                        color #a1a1a1 
                        font-size 12px
                        margin-left 12px
                        cursor pointer
                        opacity 0
                        &:hover
                            text-decoration underline 
                .comment-main
                    text-indent  2em
                    color #535353 
                    font-size 12px
                    margin-left 12px
                .comment-time
                    text-align right
                    color #797979 
                    font-size 12px
                    margin-left 12px
                    

</style>

